@charset "utf-8";

/* Tags */
.list-tags { margin-bottom:15px; }
.list-tags .nav { background:#fafafa; border-right:1px solid #ddd; border-top:1px solid #ddd; }
.list-tags .nav li { border-top:0px !important; }
.list-tags .tags-item { padding:0px; overflow:hidden; margin:-4px 0px -6px; margin-right:-12px; }
.list-tags .tags-item .chk-tag { text-align:left !important; background: none !important; padding:0px !important; margin: 0px !important; box-shadow:none !important; display:inline-block !important; height:28px; line-height:28px !important; }
.list-tags .tags-item .chk-tag span { font-family:var(--op-font-sans, inherit); font-weight:normal; display:inline-block; margin:0px; padding-right:12px; line-height:28px; }
.list-tags .tags-item .chk-tag.active span,
.list-tags .tags-item .chk-tag:focus span { color:orangered; font-weight:bold; }
.list-tags .tags-item .chk-tag.active span:before,
.list-tags .tags-item .chk-tag:focus span:before { font-family:FontAwesome; content:"\f00c"; padding-right:4px; }
.list-tags .tags-submit { border:1px solid #ddd; border-top:0px; padding:0px 15px 10px; }
.list-tags .tags-submit .box-submit { border-top:1px dotted #ccc; padding-top:10px; }
.list-tags .tags-line { border-top:1px dotted #ccc; margin:6px 10px; margin-left:0px; height:1px; }

/* Top Search */
.list-tsearch { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }

/* Category */
.list-category .tabs { margin-bottom: 18px; border: 0 !important; }
.list-category .dropdown { margin-bottom: 18px; }
.list-category .div-tab.tabs ul.nav-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 2px 0 6px !important;
}
.list-category .div-tab.tabs ul.nav-tabs li {
	float: none !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.list-category .div-tab.tabs ul.nav-tabs li a,
.list-category .div-tab.tabs ul.nav-tabs li:first-child a,
.list-category .div-tab.tabs ul.nav-tabs li:last-child a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 6px 14px !important;
	font-family: var(--op-font-sans, inherit) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #4a5568 !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 20px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 0.15s ease-in-out;
}
.list-category .div-tab.tabs ul.nav-tabs li a:hover {
	background: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	color: #1e293b !important;
}
.list-category .div-tab.tabs ul.nav-tabs li.active a,
.list-category .div-tab.tabs ul.nav-tabs li.active:hover a,
.list-category .div-tab.tabs ul.nav-tabs li.active:first-child a,
.list-category .div-tab.tabs ul.nav-tabs li.active:last-child a {
	background: var(--op-primary, #3dbf62) !important;
	border-color: var(--op-primary, #3dbf62) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 6px rgba(61, 191, 98, 0.28);
}
.list-category .active a, .list-category .selected a { color: #ffffff !important; font-weight: bold !important; }
.list-category .dropdown-menu > .selected > a {
	background-color: var(--op-primary, #3dbf62) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

/* List */
.list-wrap { width:100%; }
.list-admin { text-align:center; margin:15px 0px; }
.list-btn .sort-drop { min-width:120px !important; left:auto !important; right:0px !important; }
.list-btn .sort-drop .sort a { color:crimson !important; font-weight:bold !important; }
.is-pc .ko .list-btn .sort-drop { font-size: 12px; }

/* Page */
/* Delegated to colorset.css unified modern pagination system */

/* View */
.view-wrap { width:100%; overflow:visible; }
.view-wrap.view-modal { padding:5px; margin:0px; }
.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }

/* Write */
.write-wrap { width:100%; overflow:hidden; }

@media all and (max-width:460px) {
	.responsive .view-btn i { margin-right:0px; }
}
/* ==========================================================================
   Mobile Horizontal Swipe Category Strip (1줄 가로 스와이프 칩 바 - 심층 방어)
   ========================================================================== */
@media (max-width: 768px) {
	.list-category {
		margin: 4px 0 12px 0 !important;
		clear: both !important;
		overflow: hidden !important;
		width: 100% !important;
	}
	.list-category .list-category-track,
	.list-category-track {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		padding: 4px 10px 8px 10px !important;
		margin: 0 -10px !important;
		width: calc(100% + 20px) !important;
	}
	.list-category .list-category-track::-webkit-scrollbar,
	.list-category-track::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
	/* colorset.css 의 width: 372px 고정폭 무력화 및 max-content 1줄 확장 */
	.list-category .list-category-track .nav-tabs,
	.list-category .nav-tabs.nav-justified,
	.list-category .nav-tabs,
	.list-category ul.nav-tabs {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 8px !important;
		border-bottom: 0 !important;
		padding: 0 16px 0 0 !important;
		margin: 0 !important;
		width: max-content !important;
		min-width: max-content !important;
	}
	/* colorset.css 의 width: 24% 및 apms_bunhal 인라인 width 무력화 */
	.list-category .list-category-track .nav-tabs.nav-justified > li,
	.list-category .list-category-track .nav-tabs > li,
	.list-category .nav-tabs.nav-justified > li,
	.list-category .nav-tabs > li,
	.list-category ul.nav-tabs > li {
		width: auto !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		float: none !important;
		margin: 0 !important;
		display: inline-flex !important;
	}
	.list-category .list-category-track .nav-tabs > li > a,
	.list-category .nav-tabs > li > a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		height: 36px !important;
		line-height: 34px !important;
		padding: 0 14px !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		border-radius: 20px !important;
		white-space: nowrap !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	}
}

/* ==========================================================================
   Mobile Bottom Action Buttons & #go-btn Safe Zone Clearance
   ========================================================================== */
@media (max-width: 768px) {
	.board-list .list-btn {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		/* #go-btn (width 44px + right 12px = 56px) 물리적 오버랩 방지 세이프존 */
		padding-right: 58px !important;
		position: relative !important;
	}
	.board-list .list-btn .form-group {
		margin-bottom: 0 !important;
	}
	.board-list .list-btn .pull-right,
	.board-list .list-btn .pull-left {
		float: none !important;
	}
	.board-list .list-btn .btn-group {
		display: inline-flex !important;
		align-items: center !important;
	}
	.board-list .list-admin {
		padding-right: 58px !important;
	}
}

/* ==========================================================================
   Dark Mode Surface Tokens Pairings (html.theme-dark / body.theme-dark)
   ========================================================================== */
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
	box-shadow: none !important;
}
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a:hover,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a:hover {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #f1f5f9 !important;
}
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:hover a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:hover a {
	background: var(--op-primary, #3dbf62) !important;
	border-color: var(--op-primary, #3dbf62) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(61, 191, 98, 0.28) !important;
}
html.theme-dark .list-tsearch,
body.theme-dark .list-tsearch {
	background: #18181d !important;
	border-color: #272730 !important;
	color: #cbd5e1 !important;
}
html.theme-dark .list-tags .nav,
body.theme-dark .list-tags .nav {
	background: #18181d !important;
	border-color: #272730 !important;
}